<template>
<div ref="artRef"></div>
</template>

<script setup>
import ArtPlayer from 'artplayer';
import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue';

const emit = defineEmits(['get-instance']);

const props = defineProps({
    option: {
        type: Object,
        required: true,
    },
});

const instance = ref(null);
const artRef = ref(null);

onMounted(() => {
    instance.value = new ArtPlayer({
        ...props.option,
        container: artRef.value,
    });
    nextTick(() => {
        emit('get-instance', instance.value);
    });
});

onBeforeUnmount(() => {
    if (instance.value) {
        instance.value.destroy(false);
    }
});
</script>